<template>
    <div id="all">
        <div id="top">
            <div class="biao">
                <router-link to="/second/User/Setting">
                <span class="fa fa-cog"></span>
                </router-link>
                <router-link to="/second/ShoppingCar">
                <span class="fa fa-shopping-cart cart"></span>
                </router-link>
            </div>
            <router-link to="/second/User/Online/Upload">
                <div class="avatar">
                    <img :src="avatar?avatar:'/static/timgss.jpg'">
                    <p>{{username}}</p>
                </div>
            </router-link>
        </div>
        <div id="box">
            <div class="item red">
                <span>0(笔)</span>
                <p>成功卖出</p>
            </div>
            <div class="item red">
                <span>0%</span>
                <p>好评率</p>
            </div>
            <div class="item">
                <span>0</span>
                <p>好评</p>
            </div>
            <div class="item">
                <span>0</span>
                <p>中评</p>
            </div>
            <div class="item">
                <span>0</span>
                <p>差评</p>
            </div>
            
        </div>
        <div id="my-order">
            <span>我的订单</span>
        </div>
        <div id="manage">
            <div class="one">
                <span class="fa fa-shopping-bag"></span>
                <p>购买订单</p>
            </div>
            <div class="one">
                <span class="fa fa-file-text-o"></span>
                <p>卖出订单</p>
            </div>
            <div class="one">
                <span class="fa fa-rmb"></span>
                <p>退款管理</p>
            </div>
            <div class="one">
                <span class="fa fa-credit-card"></span>
                <p>我的账户</p>
            </div>
        </div>
        <div class="list">
            <span class="fa fa-camera" style="color:orangered"></span>
            <router-link to="/second/User/Sent">
                <span class="left">我的发布</span>
            </router-link>
            <span class="fa fa-angle-right"></span>
            <hr>
            <span class="fa  fa-venus-double" style="color:blue"></span>
            <span class="left">我的拼团</span>
            <span class="fa fa-angle-right"></span>
            <hr>
            <span class="fa fa-heart-o" style="color:red"></span>
            <span class="left">我的收藏</span>
            <span class="fa fa-angle-right"></span>
            <hr>
            <span class="fa fa-thumbs-o-up" style="color:orange"></span>
            <span class="left">我的关注</span>
            <span class="fa fa-angle-right"></span>    
            <hr>
            <span class="fa fa-renren" style="color:green"></span>
            <span class="left">我的认证</span>
            <span class="fa fa-angle-right"></span> 
            <hr>
            <span class="fa fa-file-excel-o" style="color:orangered"></span>
            <span class="left">我的优惠</span>
            <span class="fa fa-angle-right"></span> 
        </div>
        <div class="list">
            <span class="fa fa-question-circle-o" style="color:#87CEFF"></span>
            <span class="left">帮助中心</span>
            <span class="fa fa-angle-right"></span> 
            <hr>
            <span class="fa fa-user-circle-o" style="color:#9f79ee"></span>
            <span class="left">联系客服</span>
            <span class="fa fa-angle-right"></span> 
            <hr>
            <span class="fa fa-truck" style="color:#cd950c"></span>
            <span class="left">支持快递</span>
            <span class="fa fa-angle-right"></span> 
            <hr>
            <span class="fa fa-home" style="color:#ff3e96"></span>
            <span class="left">商家入驻</span>
            <span class="fa fa-angle-right"></span> 
            <hr>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue"
import {mapState,mapGetters} from 'vuex'
export default{
    data:function(){
        return{

        }
    },
    components:{
        Tabbar,
        mapState,
        mapGetters
    },
    mounted:function(){
        this.$store.dispatch("requestUserInfo");
        this.$store.commit("setUsername");
        this.$store.commit("setAvatar");
    },
    computed:{
        ...mapState([
            "username",
            "avatar"
        ])
    }
}
</script>

<style scoped>
    a{
        text-decoration: none;
        color: black;
    }
    #all{
        height: calc(100vh - 44px);
        overflow-y: scroll;
        background-color: #eee;
    }
    .biao{
        display: flex;
        justify-content: space-between;
        padding: 6px 10px;
    }
    .fa-cog{
        color: white;
        font-size: 25px;
    }
    .cart{
        color: white;
        font-size: 25px;
    }
    #top{
        width: 100%;
        height: 150px;
        background-image: url("/static/2.jpg");
    }
    .avatar{
        text-align: center;
        padding-top: 5px;
    }
    .avatar img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    .avatar p{
        color: white;
    }
    p{
        margin: 0;
    }
    #box{
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #aaa;
        background-color: white;
    }
    .item{
        text-align: center;
    }
    .red span{
        color: red;
    }
    .item p{
        font-size: 13px;
        color: #444;
    }
    #my-order{
        margin-top: 8px;
        height: 35px;
        line-height: 35px;
        padding-left: 8px;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        font-size: 14px;
        background-color: white;
    }
    #manage{
        height: 55px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #aaa;
        background-color: white;
    }
    .one{
        width: 25%;
        text-align: center;
        color: #444;
    }
    .one span{
        margin-top: 10px;
        font-size: 22px;
    }
    .one p{
        font-size: 11px;
    }
    .list{
        margin-top: 8px;
        padding-left: 15px;
        background-color: white;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        margin-bottom: 10px;
    }
    .left{
        margin-left: 10px;
        margin-right: 185px;
        font-size: 14px;
    }
    hr{
        margin-left: 30px;
        color: #eee;
    }
    .fa-angle-right{
        color: #aaa;
    }
</style>